<template>
  <div class="assignment">
    <div class="resetTitle">
      <div @click="home" class="imgs"><span class="iconfont icon-fanhui"></span></div>
      <div class="resetText">任务详情</div>
    </div>
    <div style="width: 100%;height: 50px;"></div>

    <div class="taskCon">
      <img :src="qrCode" class="qrImg"  v-if="qrCodeHidden"/>
      <div class="taskflex">
        <div style=" font-weight: bold;font-size: 16px;">{{ task.title }}</div>
        <div style="color: red;">{{ task.taskType }}</div>
      </div>
    </div>
    <div class="taskCon">
      <div class="taskflex photoUl">
        <div class="photo"><img :src="task.avatar"/></div>
        <div class="detail">
          <ul>
            <li>
              <p>商务名称:</p>
              <p>{{ task.nickName }}</p>
            </li>
            <li>
              <p>微信号:</p>
              <p>{{ task.weixin }}</p>
            </li>
            <li>
              <p>商务组:</p>
              <p>{{ task.groupName }}</p>
            </li>
            <li>
              <p>身份:</p>
              <p>{{ task.role + task.identity }}</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="taskCon manNum">
      <div class="manNums">
        <div class="item">
          <div class="num">需要人数</div>
          <div>{{ task.needMan }}</div>
        </div>
      </div>
      <div class="manNums">
        <div class="item">
          <div class="num">浏览人数</div>
          <div>{{ task.visitNumber }}</div>
        </div>
      </div>
    </div>
    <div class="taskCon money">
      <div class="manNums ">
        <div class="item">
          <div class="items">
            <div class="num">本金</div>
            <div class="moneyNum">{{ task.capital }}</div>
          </div>
          <div>{{ task.capitalReturnTime }}</div>
        </div>
      </div>
      <div class="manNums">
        <div class="item">
          <div class="items">
            <div class="num">佣金</div>
            <div class="moneyNum">{{ task.commission }}</div>
          </div>
          <div>{{ task.commissionReturnTime }}</div>
        </div>
      </div>
    </div>
    <div class="taskCon taskrequest">
      <div class="taskflex">
        <div style="color: #2d6cfe">任务要求</div>
        <div>{{ task.taskDemand }}</div>
      </div>
    </div>
    <div style="width: 100%;height: 60px;background: #f8f8f8;"></div>
    <div class="resetBut">
      <div class="button" @click="clicktask">接任务</div>
    </div>
    <!--        弹窗-->
    <div class="detailPop" v-show="detailPopFlag">
      <div class="detailPopCon">
        <div class="padding">
          <div class="test">防骗小测验</div>
          <div class="questionCon" v-for="(item,index) in questList">
            <div class="question">题目
              {{ index + 1 }}. ️{{ item.examTitle }}</div>
            <div>
              <van-radio-group v-model="radio" direction="horizontal" v-if="index == 0">
                <van-radio name="1">{{ item.optionA }}</van-radio>
                <van-radio name="2">{{ item.optionB }}</van-radio>
              </van-radio-group>
              <van-radio-group v-model="radio2" direction="horizontal" v-if="index==1">
                <van-radio name="1">{{ item.optionA }}</van-radio>
                <van-radio name="2">{{ item.optionB }}</van-radio>
              </van-radio-group>
            </div>
          </div>
          <div class="subAnswer" @click="subAnswer">提交答案</div>
        </div>
      </div>
    </div>
<!--    答案解析弹窗-->
    <div class="detailPop" v-show="answerAnalyze">
      <div class="detailPopCon">
        <div class="padding">
          <div class="test">答案解析</div>
          <div class="questionCon" v-for="(item,index) in questList">
            <div class="question">题目
              {{ index + 1 }}. ️{{ item.examTitle }}</div>
            <div>
              <div>解析：<strong style="color: red">{{item.parse}}</strong></div>
            </div>
          </div>

          <div class="subAnswer" id="subAnswerId" @click="subAnswer2">查看完毕</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>


import taskApi from '@/api/task'
import comApi from '@/api/comapi'
import {Toast} from "vant";

export default {
  name: "assignmentDetail",
  data() {
    return {
      qrCodeHidden:false,
      qrCode:'',
      radio: '',
      radio2: '',
      detailPopFlag: false,
      currentId: '',
      task: {},
      questList: [],
      answer1:'',
      answer2:'',
      answerAnalyze:false,
      closed:0,  //  0 倒计时未开始  1 倒计时进行中  2 倒计时已结束
      examSuccess:false,
      hidden:'1'
    }
  },
  created() {
    this.currentId = this.$route.query.id
    if (this.$route.query.active) {
      let local = window.localStorage
      local.setItem("tabActive",this.$route.query.active)
      local.setItem("activeCurrentTaskCode",this.$route.query.activeCurrentTaskCode)

    }
    if (this.$route.query.hidden) {
      this.hidden = this.$route.query.hidden
    }
    this.taskDetail()

  },
  methods: {
    taskDetail() {
      taskApi.taskDetail(this.currentId,this.hidden).then(res => {
        console.log(res.data.record)
        this.task = res.data.record
        if (this.hidden == 0) {
          this.qrCodeHidden = 1
          this.qrCode = this.task.qrcode
        }
      })
    },
    questionLoad() {
      comApi.getQuestList().then(res => {
        this.questList = res.data.records
      })
    },
    home() {
      this.$router.back()
    },
    clicktask() {
      debugger
      if(this.closed == 2){ // 倒计时已结束
        taskApi.taksDoable(this.task.id).then(res=>{
          Toast(res.data.msg)
          // 重新加载详情
          this.qrCodeHidden = true,
                  this.qrCode = res.data.qrImg
        })
        // this.closed = 0
        return
      }

      this.detailPopFlag = true
      comApi.getQuestList().then(res => {
        console.log(res)
        this.questList = res.data.records
          if(res.data.records[0].answer == 'A'){
            this.answer1=1
          }else {
            this.answer1=2
          }
          if(res.data.records[1].answer == 'A'){
            this.answer2=1
          }else {
            this.answer2=2
          }
      })

    },
    subAnswer(){
      let that = this
      this.closed = false
      console.log(this.radio,this.answer1)
      console.log(this.radio2,this.answer2)
      this.detailPopFlag = false
      this.answerAnalyze = true
      var el = document.getElementById('subAnswerId')
      var times = 5;
      // el.classList.add('mouseDisabled')//添加禁止点击事件

      if(this.radio == this.answer1 && this.radio2 == this.answer2){
        el.setAttribute('disabled','disabled')
        this.$toast('恭喜答对了')
        this.examSuccess = true
        var sec = setInterval(function () {
          console.log(el)
          that.closed = 1
          console.log("倒计时开始")
          el.innerHTML = '请等待'+times + "秒";
          if (times === 0) {
            times = 5
            that.closed =2
            console.log("倒计时结束")
            el.innerHTML = '查看完毕'
            clearInterval(sec)
            return
          }
          times--;
        }, 1000)
      }else {
        this.$toast('答错了，请重新作答')
        var sec2 = setInterval(function () {
          console.log(el)
          that.closed = 1
          console.log("倒计时开始")
          el.innerHTML = '请等待'+times + "秒";
          if (times === 0) {
            times = 5
            that.closed =2
            console.log("倒计时结束")
            el.innerHTML = '查看完毕，再次作答'
            clearInterval(sec2)
            return
          }
          times--;
        }, 1000)
      }



    },
    subAnswer2(){
      if(this.closed == 1){
        return;
      }
      if(this.radio == this.answer1 && this.radio2 == this.answer2){
        // 接任务
        this.answerAnalyze = false
        this.detailPopFlag = false
        return
      }else {
        this.detailPopFlag = true
        this.answerAnalyze = false
        this.radio = ''
        this.radio2 = ''
        comApi.getQuestList().then(res => {
          console.log(res)
          this.questList = res.data.records
          if(res.data.records[0].answer == 'A'){
            this.answer1=1
          }else {
            this.answer1=2
          }
          if(res.data.records[1].answer == 'A'){
            this.answer2=1
          }else {
            this.answer2=2
          }
        })
      }
    }

  }
}
</script>

<style lang="less" scoped>
.assignment {
  width: 100%;
  min-height: 100%;
  background: #f8f8f8;
}

.resetTitle {
  width: 100%;
  padding: 15px 0;
  position: fixed;
  top: 0;
  left: 0;
  background: #f8f8f8;
  z-index: 10001;

  .imgs {
    position: absolute;
    left: 10px;
    top: 13px;

    span {
      font-size: 25px;
    }
  }

  .resetText {
    width: 100%;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
  }
}

.taskCon {
  width: 100%;
  border-bottom: 5px solid #f0eff4;
  .qrImg{
    width: 100%;
  }
  .taskflex {
    padding: 10px;
    display: flex;
    justify-content: space-between;
    /*align-items: center;*/
  }

  .photoUl {
    .photo {
      width: 70px;

      img {
        width: 60px;
        height: 60px;
        border-radius: 50%;
      }
    }

    .detail {
      flex: 1;

      ul {
        width: 100%;

        li {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 4px;

          :nth-child(1) {
            color: #838384;
            font-size: 12px !important;
            font-weight: 700;
          }

          :nth-child(1) {
            font-size: 14px;
          }
        }
      }
    }
  }


}

.manNum {
  .manNums {
    padding: 0 10px;

    .item {
      padding: 10px 0px;
      border-bottom: 1px solid #e8e8e8;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .num {
        color: #45a5f6;
      }
    }

  }

  :nth-child(2) {
    .item {
      border-bottom: none;
    }
  }
}

.money {
  .manNums {
    padding: 0 10px;

    .item {
      padding: 10px 0;
      border-bottom: 1px solid #e8e8e8;

      .items {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .num {
          color: #45a5f6;
        }

        .moneyNum {
          font-size: 22px;
        }
      }
    }

  }

  :nth-child(2) {
    .item {
      border-bottom: none;
    }
  }
}

.taskrequest {
  border-bottom: none;
}

.resetBut {
  width: 100%;
  background: white;
  position: fixed;
  left: 0;
  bottom: 0;
  padding: 10px 0;

  .button {
    margin: 0 auto;
    width: 100%;
    border-radius: 30px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #f8f5be;
    font-size: 18px;
  }

}

.detailPop {
  width: 100%;
  min-height: 100%;
  background: rgba(0, 0, 0, .5);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;

  .detailPopCon {
    width: 100%;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -103px;
    background: #ffffff;

    .padding {
      padding: 10px;

      .test {
        font-size: 18px;
        font-weight: bold;
        text-align: center;
      }

      .questionCon {
        margin-bottom: 20px;
      }
    }

    .subAnswer {
      width: 85%;
      height: 40px;
      text-align: center;
      line-height: 40px;
      border-radius: 20px;
      background: #f8f5be;
      margin: 0 auto;
      /*color: #ffffff;*/
    }
  }
}
</style>
